<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      @media screen and (min-width: 1500px) {
        .main {
          display: flex;
          height: 100vh;
        }
        iframe {
          flex: 1;
        }
      }
	  @media screen and (max-width: 1500px) {
        .main {
          display: flex;
		  flex-direction: column;
        }
		iframe{
			width: 90%;
			margin: 5px auto;
		}
      }
      iframe {
        height: 100vh;
		background-color: antiquewhite;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <aside>
        <div>
          <h4>开篇词</h4>
          <p>00 | 职场是一场多维度的竞争</p>
        </div>
        <div>
          <h4>模块一 思维致胜：想的明白才能做得明白</h4>
          <p>01 | 流程意识 ：如何成为善用流程的高手？</p>
          <p>02 | 数据至上 ：如何用数据增强你的职场说服力</p>
          <p>03 | 复盘技巧 ：深度复盘的三个步骤</p>
          <p>04 | 拆解方法 ：如何破解工作难题无从下手的尴尬</p>
          <p>05 | 优先思维：手中百件事，如何评估事情的优先级？</p>
        </div>
        <div>
          <h4>模块二 能力重识：六大核心职场力</h4>
          <p>06 | 语言表达：教你清晰表达，高效沟通</p>
          <p>07 | 书面表达：让周报、汇报、纪要成为你的职场必杀技</p>
          <p>08 | 职场学习：不要让吃老本的心态毁了自己</p>
          <p>09 | 工作技能：如何避免自己成为一个职场螺丝钉？</p>
          <p>10 | 行业视野：为啥你的领导就是比你厉害？</p>
          <p>11 | 商业思维：那些业务一把手想的都是啥？</p>
        </div>
        <div>
          <h4>模块三 人际历练：搞定沟通与协作</h4>
          <p>12 | 关系建立：什么样的人际关系才是对工作有价值的？</p>
          <p>13 | 关系经营：如何让别人在关键时刻支持你？</p>
          <p>14 | 沟通说服：如何沟通才能让别人真心实意地帮你？</p>
        </div>
        <div>
          <h4>结束语</h4>
          <p>结束语 | 让晋升在个人修行中自然完成</p>
        </div>
      </aside>
      <iframe
        src="./src/开篇词/00 | 职场是一场多维度的竞争.html"
        frameborder="0"
      ></iframe>
    </div>
    <script>
      const iframe = document.querySelector("iframe");
      document.querySelector("aside").addEventListener("click", (event) => {
        const { target } = event;
        const { nodeName, innerText } = target;
        if (nodeName === "P") {
          const parentPath = target.parentNode.firstElementChild.innerText;
          iframe.src = `./src/${parentPath}/${innerText}.html`;
        }
      });
    </script>
  </body>
</html>
